<template>
	<view class="custom_pay">
		<view class="main">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll_Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="pay_wrap">
					<view class="pay pay_box">
						<radio-group @change="handSelectd">
							<view class="pay_list" v-for="(item, index) in options.list" :key="item.value">
								<view>
									<radio color="#39B19D" :value="item.value" :checked="payType * 1 === index + 1" />
								</view>
								<view style="margin-left: 20rpx">{{ item.name }}</view>
							</view>
						</radio-group>
					</view>
				</view>
			</scroll-view>
			<view class="footer">
				<view class="btn_box">
					<view class="container">
						<up-button class="bth" color="#39B19D" @click="cancel">
							取消
						</up-button>
						<up-button class="bth" color="#39B19D" @click="confirm">
							確認
						</up-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	import {
		formatDate
	} from '@/utils/formatDate';

	import {
		getOrderCode,
		saveSlotLog,
		saveSlotPay
	} from '@/api/order';

	export default {
		props: {
			payType: {
				default: '1',
			},
			payPrice: {
				default: 0,
			},
		},
		data() {
			return {
				view: {},
				count: -1,
				options: {
					list: [{
							value: '5',
							name: '現金',
						},
						{
							value: '6',
							name: '餘額',
						},
						// {
						// 	value: '7',
						// 	name: '儲值卡',
						// },
						// {
						// 	value: '8',
						// 	name: '电子票券',
						// },
					],
				},
				payIndex: '5',
				scrollTop: 0,
				selectRange: [],
			};
		},
		mounted() {
			console.log('list', this.options);
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
			cancel() {
				// TODO: 取消
				this.close();
			},
			confirm() {
				// TODO: 确认
				this.$emit('confirm');
				if (this.payIndex == 6) {
					this.$emit('paymentBalance')
					return
				}
				this.jump(this.payIndex);
			},
			submit() {
				if (this.checkFormList()) {
					// 提交数据
					const {
						title,
						num,
						money,
						min,
						start_time,
						end_time,
						room_type
					} =
					this.form;
					updateCouponSend({
						name: title,
						num,
						money,
						min,
						start_time,
						end_time,
						room_type,
						status: 1,
					}).then(res => {
						uni.showToast({
							title: '添加成功',
							duration: 1000,
						});
					});
				} else {
					uni.showModal({
						title: '系統提示',
						content: '請檢查是否填寫',
					});
				}
			},
			checkFormList() {
				const {
					title,
					num,
					money,
					min,
					start_time,
					end_time,
					room_type
				} =
				this.form;
				return (
					title && num && money && min && start_time && end_time && room_type
				);
			},
			formatDate(data) {
				return formatDate(data);
			},
			handSelectd(e) {
				this.payIndex = e.detail.value;
				// console.log('e.detail.value', e.detail.value);
				this.$emit('slectedPay', e.detail.value);
			},
			close() {
				this.$emit('close');
			},
			jump(data) {
				let url = '';
				switch (data) {
					case '5':
						url = '/pages/pay/slotMachines/slotMachines';
						break;
					case '6':
						url = '/pages/pay/predetermine/predetermine?pay=true';
						break;
					case '7':
						url = '/pages/pay/predetermine/predetermine?pay=true';
						break;
					default:
				}
				this.getOrderNo(url)
				// return

			},
			upper(e) {
				// console.log(e);
			},
			lower(e) {
				// console.log(e, '已经滚动到底部');
			},
			scroll(e) {
				// console.log(e, '记录滚动相关的数据');
			},
			getOrderNo(url) {
				const {
					user,
					room,
					order
				} = useStore();
				const params = Object.assign({
						room_id: room.getRoomOptions.id,
						// pay_type: order.getOrderPay.pay_type,
						pay_type: 5,
						// money: order.getOrderObj.money ?
						// 	order.getOrderObj.money.split('.')[0] * 1 :
						// 	'',
						money: order.getOrderObj.money,
						// date: `${order.getOrderObj.year}-${order.getOrderObj.date}`,
						date: order.date,
						timeslot: `${order.getOrderObj.startTime},${order.getOrderObj.endTime}`,
						package_id: order.package ? order.package.id : '',
						coupon_id: order.couponInfo ? order.couponInfo.id : '',
					},
					order.getOrderObj.package_options &&
					order.getOrderObj.package_options.id ? {
						package_id: order.getOrderObj.package_options.id
					} : {},
				);
				if (!order.getOrderObj.endTime) {
					uni.showToast({
						title: '請選擇時長',
						icon: 'none'
					})
					return
				}
				// console.log(order.couponInfo, '優惠券')
				// return

				// console.log(params, '查看')

				getOrderCode(params).then(res => {
					// console.log(res, '訂單編號')
					if (res && res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						// this.sendCoinRecord(res.order_no)
						uni.navigateTo({
							// url
							url: `/pages/pay/slotMachines/slotMachines?orderNo=${res.order_no}`
						});
					}
				})
			},
			// 測試提交投幣記錄
			sendCoinRecord(order_no) {
				let params = {
					store_id: 1,
					order_no: order_no,
					equipmentID: '650a9142e2375-650a9142e2377',
					amount: 300,
					amount_type: 1, //  1--纸币  2--硬币
					type: 1, //  1--投币  2--找零
					num: 3,
					denomination: 100,
				}
				saveSlotLog(params).then(res => {
					console.log(res, '記錄成功')
				}).then(() => {
					this.sendCoinPay(order_no)
				})
			},
			// 測試提交投幣支付結果
			sendCoinPay(order_no) {
				const params = {
					order_no: order_no,
					pay_price: this.payPrice,
					order_status: 1
				}
				saveSlotPay(params).then(res => {
					console.log(res, '支付結果')
					if (res.code || res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					} else {
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						})
					}
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.custom_pay {
		height: 450rpx; // 滚动区域的高度，为了兼容问题，尽量设置大一些

		.main {
			padding: 20rpx;

			.scroll_Y {
				width: 100%; // 滚动区域的宽度
				height: 450rpx; // 滚动区域的高度，为了兼容问题，尽量设置大一些

				.pay_wrap {
					width: 100%;
					height: 100%;

					.pay {
						width: 400rpx;
						padding: 0 200rpx;

						.pay_list {
							margin-bottom: 20rpx;
							display: flex;
							justify-content: flex-start;
						}
					}
				}
			}

			.footer {
				position: fixed;
				left: 0;
				bottom: $uni-spacing-col-base;
				width: 100%;

				background-color: $uni-color-white;

				.btn_box {
					padding: 10rpx;

					.container {
						padding: 0 $uni-spacing-row-base;
						display: flex;
						justify-content: space-around;

						.bth {
							width: 300rpx;
						}
					}
				}
			}
		}
	}
</style>